<script setup>
import { ref } from 'vue'

let props = defineProps(['entityDataItem'])
let entityDataItem = props.entityDataItem

</script>


<template>
    <div class="model201-box">
        <div class="model201-box-son">
            <div v-if="entityDataItem.image0" class="row1">
                <img :src="entityDataItem.image0" alt="">
                <span>{{ entityDataItem.field11 }}</span>
            </div>
            <div v-if="entityDataItem.image1" class="row2">
                <img :src="entityDataItem.image1" alt="">
                <span>{{ entityDataItem.field12 }}</span>
            </div>
            <div v-if="entityDataItem.image2" class="row3">
                <img :src="entityDataItem.image2" alt="">
                <span>{{ entityDataItem.field13 }}</span>
            </div>
            <div v-if="entityDataItem.image3" class="row4">
                <img :src="entityDataItem.image3" alt="">
                <span>{{ entityDataItem.field21 }}</span>
            </div>
        </div>
    </div>

</template>


<style scoped>
.model201-box {
    width: 100%;
    height: 4.4rem;
    margin-bottom: 0.4rem;
}

.model201-box-son {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.1rem 0;
    background-color: #ffffff;
}

.model201-box-son>div {
    width: 3.8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.model201-box-son>div:hover {
    box-shadow: 3px 3px 3px rgb(213, 213, 213);
    transition: 0.2s;
}

.model201-box-son>div img {
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    object-fit: cover;
}

.model201-box-son>div span {
    width: 100%;
    font-size: 0.8rem;
    color: rgb(149, 149, 149);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}
</style>
